<template>
    <div class="box">

        <div class="head">充值成功页</div>

         <div class="main">
                  <img src="../../image//zfok.png" style="width: 100%; height: 100%;" alt="">
                  <div>
                    <img src="../../image//zfok1.png" class="zfok" alt="">
                  </div>
                  <div class="main-text">
                    充值成功 , <span style="color: #3087ea;" @click="ck">立即查看</span> !
                  </div>
         </div>

         <div class="foot">
             <div class="foot-h">名医推荐</div>
              <div class="foot-m">
                       <div class="foot-m-l">
                           <img src="../../image/公用页－充值成功_03.gif" alt="">
                       </div>

                       <div class="foot-m-r">
                             <p class="f-m-r-p"><span style="font-size: 35px; ">曾小贤</span> 副主任医师</p>
                             <p style="font-size: 25px;">广东省妇幼保健医院</p>
                             <p style="font-size: 25px;">好评率 98% &ensp; 服务患者数 356</p>
                             <p><button class="zx">立即咨询</button></p>
                       </div>
              </div>
         </div>



    </div>
</template>



<script setup lang="ts">
import {useRouter} from 'vue-router'

const router=useRouter()

const ck=()=>{
    router.push('/money')
}




</script>




<style  scoped lang="scss">


.box{
    display: flex;
    display: inline-block;
    width: 100%;
    height: 100%;
}
.head{
    width: 100%;
    height: 60px; // 120px * 0.5
    line-height: 75px; // 150px * 0.5
    text-align: center;
    font-size: 15px; // 30px * 0.5
}

.main{
    width: 100%;
    height: 150px; // 300px * 0.5
    margin-top: 10px; // 20px * 0.5
    position: relative;
    top: 0;
    left: 0;
}
.zfok{
    position: absolute;
    top: 250px; // 20% * 0.5
    left: 21%; // 42% * 0.5
    width: 50px; // 100px * 0.5
    height: 50px; // 100px * 0.5
}
.main-text{
    position: absolute;
    top:40%; // 75% * 0.5
    left: 30%; // 32% * 0.5
    font-size: 15px; // 30px * 0.5
    color: #fff;
}

.foot{
    width: 100%;
    height: 100%;
    margin-top: 20px; // 40px * 0.5
}

.foot-h{
    font-size: 20px; // 35px * 0.5
    margin-left: 15px; // 30px * 0.5
    color: #777777;
    margin-bottom: 10px; // 20px * 0.5
}

.foot-m{
      display: block;
      width: 100%;
      height: 160px; // 320px * 0.5
}
.foot-m-l{
      width: 20%; // 40% * 0.5
      height: 100%;
      float: left;
      text-align: center;
}

.foot-m-r{
      width: 50%;// 50% * 0.5
      height: 100%;
      float: left;
      margin-left:70px; // 40px * 0.5
}
.f-m-r-p{
    font-size: 12.5px; // 25px * 0.5
}

.zx{
    width: 100px; // 200px * 0.5
    height: 40px; // 80px * 0.5
    background-color: #3087ea;
    color: #fff;
    border-radius: 7.5px; // 15px * 0.5
    border: none;
    font-size: 15px; // 30px * 0.5
}


</style>
